<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距</title>
		<!-- 内部样式 -->
		<style>
			{/* 通配符 ：初始化所有标签的内边距和外边距*/
				margin:0;
				padding: 0;
			}
			.box{ /* 类选择器 */
			width:300px;
			height:300px;
			background-color:green;
			margin-bottom: 120px;
			/* margin:50px auto; */
		}
		.box2{
			width:300px;
			height:300px;
			background-color: pink;
			margin-top: 80px;
		}
		.bigbox{
			width:600px;
			height:600px;
			background-color:deepskyblue;
			margin-bottom: 100px;
			/* border: 1px solid black; */
			/* padding-top:100px; */
			overflow: hidden;  /*hidden隐藏 */
		}
		.sbox{
			width:300px;
			height:300px;
			background-color:plum;
		    margin-bottom: 100px;
		}
		}
		</style>
		<!-- 外边距：morgin
		 1.概念：盒子与盒子之间的距离
		 2.应用：
		  2.1可以让快捷盒子水平居中：前提条件是盒子有宽度，再给左右边距设置为auto(自动的)
		  2.2初始化所有标签的内外边距。
		 3.相邻块级盒子垂直外边距合并问题>一般在开发中只给其中一个盒子写外边距。
		 4.嵌套块级盒子外边距塌陷问题>解决方式：
		  方式一：给父盒子添加边框
		  方式二：给父盒子添加内边距
		  方式三：给父盒子添加overflow:hidden;[开发中常用的]
		 -->
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
		<div class="bigbox">
			<div class="sbox"></div>
		</div>
	</body>
</html>
